<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>预订界面</title>
 <link rel="shortcut icon" href="favicon.ico"> 
 <link href="${pageContext.request.contextPath}/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <!-- Sweet Alert -->
    <link href="${pageContext.request.contextPath}/css/plugins/sweetalert/sweetalert.css" rel="stylesheet">

    <link href="${pageContext.request.contextPath}/css/animate.css" rel="stylesheet">
    <link href="${pageContext.request.contextPath}/css/style1.css?v=4.1.0" rel="stylesheet">
    
</head>
<body>
	<div>
		<form action="${pageContext.request.contextPath}/servlet/ReserveServlet" method="post">
			<div style="width:50%;margin:0 auto;">
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">选择的房间类型：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" value="${room.roomtype}" name="roomType" readonly>
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">剩余的房间数：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" value="${room.roomtypeqty}" name="roomtypeqty" readonly >
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">房间费用：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" value="${room.roomprice}" name="roomPrice" readonly>
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">入住时间：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control layer-date" type="text" value="${startTime}" name="startTime" id="start">
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">离开时间：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control layer-date" type="text" value="${endTime}" name="endTime" id="end">
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">姓名：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" placeholder="请输入文本" name="bookPerson">
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">电话：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" placeholder="请输入文本" name="peoplephone">
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">邮箱：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" placeholder="请输入文本" name="peopleemail">
		        </div>
		    </div>
		    <div class="form-group">
		        <label class="col-sm-3 control-label" style="margin-top:18px;text-align:center">预定的房间数量：</label>
		        <div class="col-sm-9" style="margin-top:10px">
		            <input class="form-control" type="text" name="roomIndex" value="1">
		        </div>
		    </div>
		    <div style="width:30%;margin-left:300px;text-align:center">
				<button class="btn btn-primary btn-sm demo1" style="margin-top:10px"><i class="fa fa-check"></i>&nbsp;提交</button>
		    </div>
        </div>
		</form>
	</div>
	 <!-- 全局js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>

    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath}/js/content.js?v=1.0.0"></script>

    <!-- Sweet alert -->
	<script src="${pageContext.request.contextPath}/js/plugins/sweetalert/sweetalert.min.js"></script>

    <script>
        $(document).ready(function () {
            $('.demo1').click(function () {
                swal({
                    title: "欢迎入住和家酒店",
                    text: "预订成功",
                    type: "success"
                });
            });

        });
    </script>
	<!-- 全局js -->
    <script src="${pageContext.request.contextPath}/js/jquery.min.js?v=2.1.4"></script>
    

    <!-- 自定义js -->
    <script src="${pageContext.request.contextPath}/js/content.js?v=1.0.0"></script>

    <!-- layerDate plugin javascript -->
    <script src="${pageContext.request.contextPath}/js/plugins/layer/laydate/laydate.js"></script>
    <script>
       
  //日期范围限制
    var start = {
        elem: '#start',
        format: 'YYYY/MM/DD',
        min: laydate.now(), //设定最小日期为当前日期
        max: '2099-06-16', //最大日期
        istime: false,
        istoday: false,
        isclear: false,
        issure: false,
        choose: function (datas) {
            end.min = datas; //开始日选好后，重置结束日的最小日期
            end.start = datas //将结束日的初始值设定为开始日
        }
    };
    var end = {
        elem: '#end',
        format: 'YYYY/MM/DD',
        min: laydate.now(),
        max: '2099-06-16',
        istime: false,
        istoday: false,
        isclear: false,
        issure: false,
        choose: function (datas) {
            start.max = datas; //结束日选好后，重置开始日的最大日期
        }
    };
        laydate(start);
        laydate(end);
    </script>
</body>
</html>